<template>
  <div class="box">
    <van-search v-model="key" placeholder="请输入搜索关键词" />
    <van-radio-group v-model="type" direction="horizontal">
      <van-radio name="">全部</van-radio>
      <van-radio name="1">女装</van-radio>
      <van-radio name="2">女鞋</van-radio>
      <van-radio name="3">男装</van-radio>
      <van-radio name="4">食品</van-radio>
    </van-radio-group>
    <div class="price">
      价格范围
      <input v-model="start" /> 到 <input v-model="end" />
    </div>

    <van-dropdown-menu>
      <van-dropdown-item v-model="sort" :options="option1" />
      <van-dropdown-item v-model="order" :options="option2" />
    </van-dropdown-menu>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="check"
        @load="onLoad"
      >
        <div class="item" @click="gotoDetail(item.id)" v-for="item in list" :key="item.id">
          <img :src="item.img" />

          <div>
            {{ item.name }}
          </div>
          <div>价格{{ item.price }} 数量 {{ item.num }}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { goodsQuery } from "@/model/goodsModel";
export default {
  data() {
    return {
      key: "", //搜索的关键字
      type: "", //类别
      start: "", //开始
      end: "", //结束
      loading: false, //表示刷新的请求状态
      finished: false, //表示是否全部加载完成
      check: false, //是否第一次检查加载到底部
      refreshing: false, //刷新状态
      sort: "id",
      order: "asc",
      option1: [
        { text: "编号", value: "id" },
        { text: "价格", value: "price" },
      ],
      option2: [
        { text: "升序", value: "asc" },
        { text: "降序", value: "desc" },
      ],

      page: 1, //表示第一页
      limit: 3, //每页显示三条
      list: [], //每页显示的数据
      total: 100, //数据总数
    };
  },
  created() {
    this.search();
  },
  watch: {
    sort() {
      this.page = 1;
      this.list = [];
      this.finished = false;
      this.search();
    },
    order() {
      this.page = 1;
      this.list = [];
      this.finished = false;
      this.search();
    },
    start() {
      this.page = 1;
      this.list = [];
      this.finished = false;
      this.search();
    },
    end() {
      this.page = 1;
      this.list = [];
      this.finished = false;
      this.search();
    },
    key() {
      this.page = 1;
      this.list = [];
      this.finished = false;
      this.search();
    },
    type() {
      this.page = 1;
      this.list = [];
      this.finished = false;
      this.search();
    },
  },

  methods: {
    gotoDetail(id){
        this.$router.push("/detail/"+id);
    },
    onRefresh() {
      this.refreshing = false;
      this.finished = false;
      this.page = 1;
      this.list = [];
      this.search();
    },
    onLoad() {
      //碰到底部
      this.page++;
      this.search();
    },
    async search() {
      let params = {
        _page: this.page,
        _limit: this.limit,
        _sort: this.sort,
        _order: this.order,
        name_like: this.key, //lte小于等于  gte是大于等于
      };
      if (this.start) {
        params.price_gte = this.start * 1;
      }
      if (this.end) {
        params.price_lte = this.end * 1;
      }
      if (this.type) {
        //动态参数
        params.type = this.type;
      }
      let res = await goodsQuery(params);
      let params2 = {
        //请求所有数据得到数据总数
        name_like: this.key,
      };
      if (this.start) {
        params2.price_gte = this.start * 1;
      }
      if (this.end) {
        params2.price_lte = this.end * 1;
      }
      if (this.type) {
        params2.type = this.type;
      }
      let res2 = await goodsQuery(params2);
      this.list = [...this.list, ...res.data];
      this.total = res2.data.length;
      this.loading = false;
      if (this.list.length >= this.total) {
        this.finished = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.price {
  font-size: 14px;
  input {
    width: 100px;
  }
}
.van-radio-group {
  font-size: 14px;
}
.box {
  margin-bottom: 50px;
}
.item {
  width: 100%;
  height: 300px;
  margin-bottom: 10px;
  img {
    width: 100%;
    height: 240px;
  }
  div {
    width: 375px;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
